<template>
	<view class="content">
		<view>
			<u-tabs
				@click="tabClick"
				:list="tabList"
				:current="currentTabIndex"
				lineWidth="58"
				lineColor="#f56c6c"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;">
			</u-tabs>
		</view>
		<view class="itme-box">
			<view class="h-table">
				<view class="h-tr">
					<view class="h-td td_header" style="width: 200rpx;">工组名称</view>
					<view class="h-td h-td-colspan">{{submitHeader.teamName}}</view>
				</view>
				<view class="h-tr">
					<view class="h-td td_header" style="width: 200rpx;">工组组长</view>
					<view class="h-td h-td-colspan">{{submitHeader.teamLeader}}</view>
				</view>
				<view class="h-tr">
					<view class="h-td td_header" style="width: 200rpx;">报工站点</view>
					<view class="h-td h-td-colspan">
						<uni-data-select v-model="stationId" :localdata="stationList" @change="stationChange" >
						</uni-data-select>
					</view>
				</view>
				<view class="h-tr">
					<view class="h-td td_header" style="width: 200rpx;">报工时间</view>
					<view class="h-td h-td-colspan">
						<view class="u-page__tag-item" style="flex: 1;">
							  <uni-datetime-picker 
								v-model="submitDateRange" 
								type="daterange"
								@change="dateRangeChange"/>
						</view>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 6rpx;">
				<uni-table :loading="detailLoading"
					border
					stripe 
					emptyText="暂无更多数据">
				<uni-tr style="background-color: #dbfbdb;">
					<uni-th align="left" width="5" style="font-size: 12px;color: #62c188;">序号</uni-th>
					<uni-th align="left" width="100" style="font-size: 12px;color: #62c188;">合同号</uni-th>
					<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">物料编码</uni-th>
					<uni-th align="left" width="70" style="font-size: 12px;color: #62c188;">物料名称</uni-th>
					<uni-th align="left" width="70" style="font-size: 12px;color: #62c188;">规格型号</uni-th>
					<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">累计已完工数</uni-th>
					<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">累计不合格数</uni-th>
					<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">站点</uni-th>
					<uni-th align="left" style="font-size: 12px;color: #62c188;" :width="th.width" v-for="(th, thIndex) in submitThMonthList">
						{{th.thName}}
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(productItem, subIndex) in contractHistoryDetailMonthList" :key="subIndex">
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ subIndex+1 }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.contract_code }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.bom_code }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.bom_name }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.bom_standard }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.totalGoodNum }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.totalUnGoodNum }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ productItem.stationName }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;" v-for="(td, tdIndex) in productItem.dynamicList">
						{{td.value}}
					</uni-td>
				</uni-td>
				</uni-tr>
				</uni-table>
				<view style="padding-top: 20rpx;">
					<uni-pagination 
						prevText="前一页"
						nextText="下一页"
						:page-size="pageSize" 
						:current="pageCurrent" 
						:total="total" 
						@change="change" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as BaseApi from '@/api/base/base';
import * as submitApi from '@/api/work/worksubmit';

export default {
	data() {
		return {
			tabList: [{
				name: '日报表',
			}, {
				name: '月报表',
			},],
			currentTabIndex: 1,
			
			detailLoading: false,
			loadingShow: false,
			submitHeader: {},
			
			submitThList: [],
			contractHistoryDetailList: [],
			
			submitThMonthList: [],
			contractHistoryDetailMonthList: [],
			
			submitDateRange:[],
			
			stationId: null,
			stationList: [],
			
			// 每页数据量
			pageSize: 10,
			// 当前页
			pageCurrent: 1,
			// 数据总量
			total: 0,
			
		}
	},
	onLoad() {
	},
	created() {
		const today = new Date();
		const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
		const thirdDay = new Date(today.getFullYear(), today.getMonth(), 7);
		
		this.submitDateRange.push(firstDay);
		this.submitDateRange.push(thirdDay);
		
		this.initStationList();
	},
	methods: {
		formatDateString(timestamp) {
			// 将长整型时间戳转换为毫秒
			const date = new Date(timestamp);
			// 获取年份、月份和日期
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
			const day = String(date.getDate()).padStart(2, '0');
		
			// 返回格式化的日期字符串
			return `${year}-${month}-${day}`;
		},
		initStationList() {
			BaseApi.getStationList().then(res => {
				  console.log("站点列表:", res);
				  if (!res || !res.data || res.data.length == 0) {
					  this.stationList = [];
					  return;
				  }
				  this.stationList = res.data.map((item) => {
					return {
					  value: item.stationId,
					  text: item.stationName,
					};
				  });
				  if (this.stationList.length > 0) {
					  this.stationId = this.stationList[this.stationList.length - 1].value;
				  }
				  this.queryMonthReport();
			});
		},
		queryMonthReport() {
			this.loadingShow = true;
			
			let sDate = "";
			let eDate = "";
			if (this.submitDateRange.length >= 1) {
				sDate = this.formatDateString(this.submitDateRange[0]);
			}
			if (this.submitDateRange.length >= 2) {
				eDate = this.formatDateString(this.submitDateRange[1]);
			}
			submitApi.selectSubmitReportByMonthDay({
				pageNum: this.pageCurrent,
				pageSize: this.pageSize,
				stationId: this.stationId,
				startDate: sDate,
				endDate: eDate,
			}).then(res => {
				console.log("查询月报表统计数据成功:", res);
				if(res && res.rows) {
					this.contractHistoryDetailMonthList = res.rows || [];
				} else {
					this.contractHistoryDetailMonthList = [];
				}
				if (res && res.other) {
					this.submitHeader = res.other;
				}
				if (res && res.headers) {
					this.submitThMonthList = res.headers || [];
				}
				this.total = res.total || 0;
				this.loadingShow = false;
			}).catch(err => {
				console.error("查询月报表统计数据异常:", err);
				this.loadingShow = false;
				this.contractHistoryDetailMonthList = [];
			});
		},
		tabClick(e) {
			console.log("tabClick,currentTabIndex", e, this.currentTabIndex);
			const preIndex = this.currentTabIndex;
			this.currentTabIndex = e.index;
			if (preIndex != e.index) {
				if (this.currentTabIndex === 0) {
					this.navigateTo("/pages/work/dayreport/worksubmitReport");
				}
			}
		},
		navigateTo(url) {
			uni.navigateTo({ url: url });
		},
		// 分页触发
		change(e) {
			console.log('change>分页, pageCurrent', e, this.pageCurrent);
			this.pageCurrent = e.current;
			this.queryMonthReport();
		},
		// 站点选择触发
		stationChange(e) {
			// e = stationId
			console.log("stationChange>e:", e);
			this.queryMonthReport();
		},
		// 日期选择确认触发
		dateRangeChange(e) {
			console.log("dateRangeChange>e:", e);
			this.queryMonthReport();
		},
	}
}
</script>


<style lang="scss">
	/* 引入表格样式表 */
	@import "helang-table.scss";
	
	/* 示例样式开始 */
	.content {
		font-size: 28rpx;
		background-color: #f3f3f3;
		padding: 10rpx;
		
		.red{
			background-color: #DD524D;
			color: #fff;
			text-align: center;
		}
		
		.green{
			background-color: #42b983;
			color: #fff;
			text-align: center;
		}
		
		.blue{
			background-color: #007AFF;
			color: #fff;
			text-align: center;
		}
		
		.yellow{
			background-color: #ffaa00;
			color: #fff;
			text-align: center;
		}
		

		.itme-box {
			padding: 10rpx;
			background-color: #fff;
			margin-bottom: 10rpx;

			.title {
				padding-bottom: 12rpx;
				margin-bottom: 12rpx;
				border-bottom: #e5e5e5 solid 1px;
				line-height: normal;
			}
			
			// .width-fill{
			// 	width: 100%;
			// }
			
			.preview-box{
				height: 400rpx;
				box-shadow: 0 0 4px rgba(0,0,0,0.3);
			}
		}
	}
	/* 示例样式结束 */
	
	.td_header {
		color: rgb(98, 193, 136);
		background-color: #dbfbdb;
	}
</style>